<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统 - demo</title>
    <link href="./css/common.css" rel="stylesheet">
</head>

<body data-logobg="default" data-sidebarbg="default" data-headerbg="default" data-theme="default">
    <div class="layout-container">
        <!--头部信息-->
        <header class="layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> UI元素 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-36 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="0_login02.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--左侧导航-->
        <aside class="layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="images/logo-sidebar.png" title="" alt="" /></a>
            </div>
            <div class="layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="main.html"><i class="mdi mdi-home"></i> 欢迎页</a> </li>

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>示例元素+页面</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="demo01.html">UI元素</a> </li>
                                <li> <a href="0_search.html">搜索框类型</a> </li>
                                <li> <a href="0_card.html">卡片布局</a> </li>
                                <li> <a href="0_table.html">表格布局</a> </li>
                            </ul>
                        </li>

                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单示例</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="#">一级菜单</a> </li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#">一级菜单</a>
                                    <ul class="nav nav-subnav">
                                        <li> <a href="#">二级菜单</a> </li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li> <a href="#">三级菜单</a> </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li> <a href="#">一级菜单</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->


        <!--页面主要内容-->
        <main class="layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal" method="">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-username"><span class="sign">*</span>用户名</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="text" id="example-hf-username" name="example-hf-username" placeholder="请输入用户名..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group m-b-0">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li> <a href="demo01.html">表单控件</a> </li>
                                <li> <a href="demo02.html">表单控件</a> </li>
                                <li class="active"> <a href="#">其他控件</a> </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active">

                                    <div class="card">
                                        <div class="card-header">
                                            <h4>模态框</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="example-box">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模态框</button>
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">打开模态框 for @mdo</button>
                                            </div>

                                            <!-- 小尺寸  bs-example-modal-lg  改为  bs-example-modal-sm ;; modal-lg 改为  modal-sm  即可-->
                                            <!--  -->
                                            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                            <h4 class="modal-title" id="myLargeModalLabel">标题（大）</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            这里展示内容
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                            <button type="button" class="btn btn-primary">点击保存</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--  -->
                                            <!--  -->
                                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                            <h4 class="modal-title" id="exampleModalLabel">新消息</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form>
                                                                <div class="form-group">
                                                                    <label for="recipient-name" class="control-label">收件人：</label>
                                                                    <input type="text" class="form-control" id="recipient-name">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="message-text" class="control-label">消息内容：</label>
                                                                    <textarea class="form-control" id="message-text"></textarea>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                            <button type="button" class="btn btn-primary">发送消息</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--  -->
                                        </div>

                                        <div class="card-header">
                                            <h4>提示框</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="example-box">
                                                <!-- data-placement 四个属性值：top、left、bottom、right -->
                                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on 左侧</button>
                                                <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">
                                                    Popover on 顶部
                                                </button>
                                            </div>

                                        </div>

                                        <div class="card-header">
                                            <h4>警告框</h4>
                                        </div>
                                        <div class="card-body">
                                            <!-- class：alert-warning 还有有三个兄弟姐妹 alert-danger ｜ alert-success ｜ alert-info   -->
                                            <div class="alert alert-warning alert-dismissible" role="alert">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <strong>警告</strong> 这里展示提示信息
                                            </div>
                                            <!-- class  example-p-6 (1-6) -->
                                            <button class="btn btn-primary example-p-3">弹出框示例</button>
                                        </div>

                                        <div class="card-header">
                                            <h4>其他效果</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="example-box">
                                                <button type="button" id="myButton" data-loading-text="处理中..." class="btn btn-primary" autocomplete="off">
                                                    等待状态
                                                </button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <button class="btn btn-label btn-danger"><label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label> 确认提交</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <button class="btn btn-w-md btn-round btn-success">绿色按钮</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="#!">收件箱 <span class="badge">99+</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <button class="btn btn-warning" type="button">消息 <span class="badge">4</span></button>
                                                <br><br>
                                            </div>
                                            <label class="checkbox checkbox-primary m-t-10">
                                                <input type="checkbox" checked=""><span>Primary（主色）</span>
                                            </label>
                                            <br>

                                            <label class="switch switch-solid switch-primary">
                                                <input type="checkbox" checked="">
                                                <span></span>&nbsp;&nbsp;
                                                <small>开关</small>
                                            </label>
                                        </div>

                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</body>
<script type="text/javascript" src="js/commonJs.js"></script>
<script>
    //  等待按钮示例
    $('#myButton').on('click', function() {
        var $btn = $(this).button('loading');
        setTimeout(function() {
            $btn.button("reset")
        }, 800);
    });

    $('.example-p-1').on('click', function() {
        $.alert({
            title: '嗨',
            content: '这是对用户的简单提示框。 <br> 一些 <strong>HTML</strong> <em>内容</em>',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function() {
                        $.alert('你点击了确认!');
                    }
                },
                cancel: {
                    text: '取消',
                    action: function() {
                        $.alert('你点击了取消!');
                    }
                }
            }
        });
    });
    $('.example-p-2').on('click', function() {
        $.confirm({
            title: '对话框',
            content: '一些内容...',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function() {
                        $.alert('确认的!');
                    }
                },
                cancel: {
                    text: '关闭',
                    action: function() {
                        $.alert('取消的!');
                    }
                },
                somethingElse: {
                    text: '其他',
                    btnClass: 'btn-blue',
                    keys: ['enter', 'shift'],
                    action: function() {
                        $.alert('其他的选择？');
                    }
                }
            }
        });
    });
    $('.example-p-3').on('click', function() {
        $.confirm({
            title: '提示',
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<label>请输入您的姓名</label>' +
                '<input type="text" placeholder="姓名" class="name form-control" required />' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: '提交',
                    btnClass: 'btn-blue',
                    action: function() {
                        var name = this.$content.find('.name').val();
                        if (!name) {
                            $.alert('请您输入您的姓名');
                            return false;
                        }
                        $.alert('您的姓名是： ' + name);
                    }
                },
                cancel: {
                    text: '取消'
                },
            },
            onContentReady: function() {
                var jc = this;
                this.$content.find('form').on('submit', function(e) {
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click');
                });
            }
        });
    });
    $('.example-p-4').on('click', function() {
        $.confirm({
            title: '错误提示',
            content: '笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: '重试',
                    btnClass: 'btn-red',
                    action: function() {}
                },
                close: {
                    text: '关闭'
                }
            }
        });
    });
    $('.example-p-5').on('click', function() {
        $.confirm({
            title: '成功',
            content: '难消受灯昏罗帐，怅昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！',
            type: 'green',
            buttons: {
                omg: {
                    text: '谢谢',
                    btnClass: 'btn-green',
                },
                close: {
                    text: '关闭',
                }
            }
        });
    });
    $('.example-p-6').on('click', function() {
        $.confirm({
            title: '警告',
            content: '把剑凄然望，无处招归舟。明日天涯路远，问谁留楚佩，弄影中洲？数英雄儿女，俯仰古今愁。',
            type: 'orange',
            typeAnimated: false,
            buttons: {
                omg: {
                    text: '重试',
                    btnClass: 'btn-orange',
                },
                close: {
                    text: '关闭',
                }
            }
        });
    });
</script>

</html>